<template>
  <el-row class="container">
    <!--heder-->
    <el-row class="header">
      <el-col :span="4" class="header-title">
        <span>后台管理系统</span>
      </el-col>
      <el-col :span="4" class="userinfo" :offset="15">
        <el-dropdown trigger="hover">
          <span class="el-dropdown-link userinfo-inner">{{sysUserName}}</span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="updateSecretkey">修改密码</el-dropdown-item>
            <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
    <el-row class="main">
      <!--导航菜单-->
      <div class="main-left">
        <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#545c64" active-text-color="#fff" text-color="#fff" @open="handleOpen" @close="handleClose">
          <el-submenu index="1">
            <template slot="title">需求管理</template>
            <el-menu-item-group>
              <el-menu-item index="1-1" @click="toCompanyInfo">企业信息</el-menu-item>
              <el-menu-item index="1-2" @click="toSafetyProductionManagement">安全生产管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">版本管理</template>
            <el-menu-item-group>
              <el-menu-item index="2-1">版本列表</el-menu-item>
              <el-menu-item index="2-2">版本类型管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </div>
      <!-- 右侧视图 -->
      <div class="main-right">
        <div class="grid-content bg-purple-light">
          <el-col :span="24" class="content-wrapper">
            <transition name="fade" mode="out-in">
              <router-view></router-view>
            </transition>
          </el-col>
        </div>
      </div>
    </el-row>
  </el-row>
</template>
<script>
  // import {updatePwd} from '@/api/api';
  export default {
    data: function() {
      return {
        collapsed: false,
        sysUserName: 'Caroline',
        password: {
          oldSecretkey: '',
          secretkey: ''
        },
        dialog: false
      }
    },
    methods: {
      toCompanyInfo(){
        this.$router.push('/index')
      },
      toSafetyProductionManagement(){
        this.$router.push('/safetyProductionManagement')
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      //退出登录
      logout: function() {
        var _this = this;
        this.$confirm('确认退出吗?', '提示', {
          type: 'info'
        }).then(() => {
          this.clearStorage();
        }).catch(() => {

        });
      },
      clearStorage: function(){
        sessionStorage.removeItem('user');
        sessionStorage.removeItem('jwt');
        this.$router.push('/login');
      },
      closeDialog: function(){
        this.password = {
          oldSecretkey: '',
          secretkey: ''
        }
      },
      cancel: function(){
        this.dialog = false;
      },
      updateSecretkey: function(){
        this.dialog = true;
      },
      update: function(){
        updatePwd(this.password).then(data=>{
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.dialog = false;
          this.clearStorage();
        })
      }
    },
    mounted: function() {
      var user = sessionStorage.getItem('user');
      if (user) {
        user = JSON.parse(user);
        this.sysUserName = user.username || '';
      }
    },
  }
</script>
<style scoped lang="scss">
  .container{
    .header{
      width: 100%;
      line-height: 70px;
      background-color: pink;
      .header-title{
        text-align: center;
        background-color: #00284d;
        color: white;
      }
      .userinfo {
        text-align: right;
        padding-right: 30px;
        float: right;
        .userinfo-inner {
          cursor: pointer;
          color: #fff;
        }
      }
    }
    .main{
      .main-left{
        display: inline-block;
        width: 229px;
      }
      .main-right{
        display: inline-block;
      }
    }
  }
</style>
